<template lang="pug">
  Split(v-model="split", mode="vertical")
    .gak-scroll#gak-body-right-top(slot="top", ref="chat")
      template(v-for="content in contents")
        .gak-content-head(:class="{ 'gak-content-self': content.username === username, 'gak-content-teacher': content.username === 'teacher'}")
          | {{ content.username }}&nbsp;&nbsp;{{ content.date }}&nbsp;&nbsp;(ip:{{ content.ip }})
        .gak-content-body(v-html="content.msg")
    .gak-scroll#gak-body-right-bottom(slot="bottom")
      //- Input(v-model="chatContent", type="textarea", :autosize="{minRows: 4,maxRows: 4}", placeholder="Enter something...")
      .gak-scroll#gak-body-right-content(
        contenteditable="true",
        ref="chatContent",
        placeholder="Enter something...",
        @keyup.ctrl.enter="send",
        @keyup.ctrl.82="reset",
        @keyup.ctrl.69="expression=!expression",
        @keyup.ctrl.78="clean")
      #gak-body-right-bottom-btn.gak-no-select
        Tooltip.gak-float-left(content="ctrl+e", theme="light", placement="top-start")
          img.gak-expression(@click="expression=!expression", src="")
        span.gak-float-left(style="line-height:35px") 当前在线：{{ clientCount }}
        baidu-expressions-picker.gak-text-left(
          v-show="expression",
          pickerClass="gak-picker",
          symbolClass="gak-symbol",
          :onSymbolClick="handleSymbolClick"
        )
        Tooltip(content="ctrl+n", theme="light", placement="top-end")
          Button(type="error", ghost, @click="clean")
            | 清屏
        Tooltip(content="ctrl+r", theme="light", placement="top-end")
          Button(type="primary", ghost, @click="reset")
            | 重置
        Tooltip(content="ctrl+Enter", theme="light", placement="top-end")
          Button(type="info", ghost, @click="send")
            | 发送

</template>

<script>
import { BaiduExpressionsPicker, BaiduExpressionsSymbol, isSymbol, SYMBOLS } from 'vue-expressions-baidu'
import getNowFormatDate from 'common@/lib/util'
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      /**
       * 初始化分割时的比例
       */
      split: 0.75,
      /**
       * 当前用户名
       */
      username: 'teacher',
      /**
       * 输入框的 dom 对象
       */
      chatContent: null,
      /**
       * 控制表情选择的显示与隐藏
       */
      expression: false
    }
  },
  mounted: function () {
    this.chatContent = this.$refs.chatContent
    // 滚动到底部
    this.$nextTick(() => {
      this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight
    })
  },
  watch: {
    // 监听，滚动到底部
    contents () {
      this.$nextTick(() => {
        this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight
      })
    }
  },
  computed: {
    ...mapState([
      'online',
      'contents',
      'clientCount'
    ])
  },
  methods: {
    ...mapMutations([
      'CLEAN_CONTENTS'
    ]),
    /**
     * 重置输入框的内容
     */
    reset: function () {
      this.chatContent.innerHTML = ''
    },
    /**
     * 清除屏幕中显示信息
     */
    clean: function () {
      this.CLEAN_CONTENTS()
    },
    /**
     * 发送信息
     */
    send: function () {
      const _this = this
      // 内容为空则不发送
      if (_this.chatContent.innerHTML.trim() === '') {
        this.chatContent.innerHTML = ''
        return
      }
      this.$socket.emit('sendMessage', {
        username: _this.username,
        date: getNowFormatDate(),
        msg: _this.chatContent.innerHTML,
        ip: '10.0.0.1'
      })
      this.reset()
    },
    /**
     * 表情选择
     * @param symbol 选择的表情
     */
    handleSymbolClick (symbol) {
      const _this = this
      // 如果存在
      if (isSymbol(symbol)) {
        let img = document.createElement('img')
        img.setAttribute('src', SYMBOLS[symbol])
        img.setAttribute('draggable', false)
        _this.expression = false
        _this.chatContent.appendChild(img)
        _this.chatContent.focus()
      }
    }
  },
  components: {
    BaiduExpressionsPicker,
    BaiduExpressionsSymbol
  }
}
</script>

<style scoped lang="less">
#gak-body-right-top {
  border: solid 1px @gak-text-placeholder;
  padding: 5px;
  .gak-content-head {
    font-size: @gak-text-normal - 5px;
    color: cornflowerblue;
  }
  .gak-content-body {
    font-size: @gak-text-normal - 7px;
    color: black;
  }
  .gak-content-self {
    color: rgb(162, 0, 255);
  }
  .gak-content-teacher {
    color: red;
  }
}
#gak-body-right-bottom {
  #gak-body-right-bottom-btn {
    text-align: right;
    margin-top: 5px;
    button {
      margin-left: 15px;
    }
  }
  #gak-body-right-content {
    width: 100%;
    min-height: (@gak-text-normal / 1.5 + 6) * 5;
    max-height: 70%;
    font-size: @gak-text-normal / 1.5;
    overflow: auto;
    padding: 10px;
    color: black;
    border: solid 1px @gak-text-placeholder;
    transition: all 0.5s;
    -webkit-user-modify: read-write-plaintext-only;
    &:empty::before {
      content: attr(placeholder);
      color: @gak-text-placeholder;
    }
    &:focus {

    }
  }
  .gak-body-right-symbols {
    box-sizing: border-box;
    padding: 16px;
  }
}
</style>
